/* Reset some default styles for better consistency */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
  }
  
  /* Apply a background color and set text color for the body */
  body {
   
    font-family: Georgia, serif;
  font-size: 18px
  }
  
  /* Style the header container */
  header {
    background-color: #1A1A1A;
    color: #C8F2F5;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Style the logo */
  .logo img {
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Style the menu toggle button (hamburger icon) */
  .menu-toggle {
    font-size: 24px;
    cursor: pointer;
    display: none;
  }
  
  /* Style the navigation menu */
  .menu {
    display: flex;
  }
  
  .menu ul {
    list-style: none;
    display: flex;
    
  }
  
  .menu li {
    margin-right: 20px;
  }
  
  .menu a {
    text-decoration: none;
    color: #C8F2F5;
    
    transition: color 0.3s ease;
   
  }
  
  
  .menu a:hover {
    color: white; /* Change the color on hover */
  }
  
  /* Media query for responsive design */
  @media screen and (max-width: 768px) {
    .menu {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: 0;
      background-color: #1A1A1A;
      width: 100%;
      border-radius: 25px;
      
    }
  
    .menu ul {
      flex-direction: column;
      align-items: center;
    }
  
    .menu-toggle {
      display: block;
    }
  
    .menu.show {
      display: flex;
    }
  
    .menu li {
      margin-right: 0;
    
      padding-top: 15px;
          padding-bottom: 15px;
  
     
    }
  }
    
     /* Header End */
    
     /* Header End */
    
     
     
    
  
  
  
  
  
  
  /* Section */
  
   .allseccontainer  {
    background-color: #1A1A1A;
    color: #C8F2F5;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    
    margin: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
    margin-bottom: 150px;
  }
  .seccontainer {
     display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 70px;
  }
  .seccontent {
    text-align: left;
  }
  .secp {
    max-width: 300px;
  }
  .secbutton {
  background-color: #C8F2F5;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  border: 2px solid #C8F2F5;
  cursor: pointer;
  box-shadow: 0px 0px 5px #C8F2F5;
  animation: pulse 2s infinite;
  
  }
  
  @keyframes pulse {
  0% {
  box-shadow: 0px 0px 5px #C8F2F5;
  }
  50% {
  box-shadow: 0px 0px 20px #C8F2F5, 0px 0px 30px #C8F2F5;
  }
  100% {
  box-shadow: 0px 0px 5px #C8F2F5;
  }
  }
  
  .secimg {
    width: 100%;
  
  
  
  }
  @media (max-width: 700px) {
    .seccontainer  {
        grid-template-columns: 1fr;
        text-align: center;
        margin-top: 50px;
    }
    .seccontent {
        text-align: center;
    }
    .secimg {
        width: 100%;
        
    }
    .secp {
        max-width: 700px;
    }
    
         .secbutton {
  
  margin-bottom: 10px;
  }
  }
  
  .sech {
  
  margin-bottom: 20px;
  }
  
  /* End Section */
  





 /*  slider */

 .ssbody {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            border: 2px solid #C8F2F5;
            box-shadow: 0px 0px 5px #C8F2F5;
            animation: pulse 2s infinite;
            color: #C8F2F5;
        }

        .sscontainer {
            position: relative;
            overflow: hidden;
        }

        .ssimage {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
      

 
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 0%);
            mix-blend-mode: difference;
        }

        .divider {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background-color: #333;
            cursor: ew-resize;
            border: 1px solid #C8F2F5;
        }

        .arrow-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: grab;
            transition: background-color 0.3s ease;
            border: 1px solid #C8F2F5;
        }

        .arrow {
            width: 0;
            height: 0;
            border-style: solid;
            position: absolute;
        }

        .arrow-left {
            border-width: 15px 20px 15px 0;
            border-color: transparent #C8F2F5 transparent transparent;
            left: 4px;
        }

        .arrow-right {
            border-width: 15px 0 15px 20px;
            border-color: transparent transparent transparent #C8F2F5;
            right: 4px;
        }

        .arrow-container.grabbing {
            cursor: grabbing;
        }

        .arrow-container:hover {
            background-color: #2c3e50;
        }


        .before-text,
.after-text {
    position: absolute;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    z-index: 1;
    top: 10%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); 

}

.before-text {
    right: 5%;
}

.after-text {
    left: 5%;
}


   /* End slider */




  
  /* How to */
  
  .cardcontainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  
  color: #1A1A1A;
  flex-wrap: wrap;
  
  }
  
  .card {
  
  color: #1A1A1A;
  margin: 5px;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  flex: 1 1 300px;
  max-width: 240px;
  height: 400px;
  box-shadow: 0px 0px 5px #1A1A1A;
  margin-bottom: 30px;
  }
  
  
  .number {
  position: absolute;
  top: -15px;
  left: -15px;
  background-color: #C8F2F5;
  color: #1A1A1A;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 2px solid black;
  
  }
  
  .cardh {
  font-size: 20px;
  margin-bottom: 10px;
  }
  
  .cardp {
  font-size: 16px;
  }
  
  .cardimg {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 2px solid #1A1A1A;
  }
  
  .howh {
  margin-top: 30px;
  padding: 25px;
  text-align: center;
  color: #1A1A1A;
  font-size: 30px;
  }
  
  .howp {
  margin-bottom: 20px;
  margin-top: -30px;
  padding: 25px;
  text-align: center;
  color: #1A1A1A;
  font-size: 20px;
  
  }
  
  /* End How to */
  /* End How to */
  
  
  
  
  
  
  
  /*  Definition to */
  
  
  
      .idcontainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 20px;
        background-color: #ffffff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
        margin-top: 150px;
      }
  
      .idtext {
        max-width: 800px;
        margin: 20px;
        color: #495057;
      }
  
  
     .idtext h1 {
     color: #1A1A1A;
      }
  
      .idimage img {
        max-width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        border: 1px solid #1A1A1A;
      }
  
      .idbutton {
  background-color: #1A1A1A;
  margin-top: 20px;
  padding: 10px 20px; 
  font-size: 20px;
  border-radius: 5px;
  border: 2px solid #1A1A1A;
  cursor: pointer;
  box-shadow: 0px 0px 5px #1A1A1A;
  animation: pulse 2s infinite;
  color: #C8F2F5;
  }
  
  @keyframes pulse {
  0% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  50% {
  box-shadow: 0px 0px 20px #1A1A1A, 0px 0px 30px #1A1A1A;
  }
  100% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  }
     
  /* End Definition to */
  
  
  
  
  
  
  
  
  
  /*  Pros */
  
  .lllcontainer  {
   
    color: #1A1A1A;
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 150px;
  }
  .lscontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    gap: 70px;
  }
  .lscontent {
    text-align: left;
    
  }
 
  
  .lsh {
   font-size: 25px;
  }
  
  .lsbutton {
  background-color: #1A1A1A;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  border: 2px solid #1A1A1A;
  cursor: pointer;
  box-shadow: 0px 0px 5px #1A1A1A;
  animation: pulse 2s infinite;
  color: #C8F2F5;
  }
  
  @keyframes pulse {
  0% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  50% {
  box-shadow: 0px 0px 20px #1A1A1A, 0px 0px 30px #1A1A1A;
  }
  100% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  }
  
  .lsimg {
       width: 100%;
  margin-bottom: 100px;
       
         
  
  }
  @media (max-width: 700px) {
    .lscontainer  {
        grid-template-columns: 1fr;
        text-align: center;
        
       
    }
    .lscontent {
        text-align: center;
    }
    
   .lsimg {
        width: 50%;  
     
        order: 2;           
           position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
    }
    .lsp {
        max-width: 700px;
    }
  }
  
  @media (max-width: 500px) {

    .lsimg {
        width: 100%;
        
           position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
         
          order: 2;
    }
  
  }

  
  
  
        .rallcontainer  {
   
    color: #1A1A1A;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 150px;
   
  }
  .rscontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
     gap: 70px;
  }
  .rscontent {
    text-align: left;
  }
  
  
  
  .rsp {
    
    text-align: left;
  
  }
  
  .rsh {
   font-size: 25px;
   
  }
  
  
  
  .rsbutton {
  background-color: #1A1A1A;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  border: 2px solid #1A1A1A;
  cursor: pointer;
  box-shadow: 0px 0px 5px #1A1A1A;
  animation: pulse 2s infinite;
  color: #C8F2F5;
  }
  
  @keyframes pulse {
  0% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  50% {
  box-shadow: 0px 0px 20px #1A1A1A, 0px 0px 30px #1A1A1A;
  }
  100% {
  box-shadow: 0px 0px 5px #1A1A1A;
  }
  }
  
  .rsimg {
    width: 100%;
    
  }
  @media (max-width: 700px) {
    .rscontainer  {
        grid-template-columns: 1fr;
        text-align: center;
        
    }
    .rscontent {
        text-align: center;
       
    }
    .rsimg {
        width: 50%;
        
           position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
         
          order: 2;
    }
    .rsp {
        max-width: 700px;
        text-align: center;
    }
  }

  @media (max-width: 500px) {

    .rsimg {
        width: 100%;
        
           position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
         
          order: 2;
    }
  
  }
  
   .prosh {
  margin-top: 100px;
  padding: 25px;
  text-align: center;
  color: #1A1A1A;
  font-size: 30px;
  }
  
  .prosp {
  margin-bottom: 20px;
  margin-top: -30px;
  padding: 25px;
  text-align: center;
  color: #1A1A1A;
  font-size: 20px;
  }
  
  /* End Pros */
  
  
  
  
  
  /* FAQ */
  
  #faq {
  max-width: 800px;
  margin: 0 auto;
  padding: 50px 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    margin-top: 300px;
  }
  
  #faq h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #1A1A1A;
  
  }
  
  details {
  margin-bottom: 20px;
  border-bottom: 1px solid #1A1A1A;
  transition: all 0.5s ease;
  }
  
  summary {
  cursor: pointer;
  font-weight: bold;
  padding: 10px 0;
  color: #1A1A1A;
  font-size: 1.2em;
  }
  
  details[open] summary {
  color: black; 
  }
  
  details p {
  padding-left: 20px;
  color: black;
  line-height: 1.6;
  }
  
  
  
  /* End FAQ */
  
  
  
  
  
  
  
    
     
     
     
    /* Body End */
    /* Body End */
    
   .footer-bottom {
    text-align: center;
    margin-top: 20px;
    background-color: #1A1A1A;
    padding: 30px;
    color: #C8F2F5;
  }
  
  .footer-bottom a{
  
    text-decoration: none;
    color: #C8F2F5;
  }
  
  .footer-bottom a:hover {
     color: #C8F2F5;
   
  }
    
    
    /* footer End */
    /* footer End */